<template>
  <div>
    <FYNavBar title="确认订单"></FYNavBar>
    <van-cell-group>
      <van-cell icon="location-o" is-link center v-if="address.city !== undefined" to="address">
        <view  slot="title" v-if="address">
          <div class="user-info">
            <span>{{ address.name }}</span>
            <span style="padding-left: 10px">{{ address.tel }}</span>
          </div>
          <div class="address-info">
            {{ address.city + address.city + address.county + address.addressDetail }}
          </div>
        </view>
      </van-cell>
      <van-cell title="请选择收货地址" icon="location-o" is-link v-if="address.city === undefined" to="address"/>
    </van-cell-group>

    <van-cell-group title="KFC" inset>
      <van-card
          v-for="g in goodsList" :key="g.id + g.name"
          :num="g.count"
          :price="g.price"
          :desc="g.intro"
          :title="g.name"
          :thumb="g.picture"
      />
    </van-cell-group>
    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import FYNavBar from "@/components/common/FYNavBar.vue";
import Address from "@/utils/address";
export default {
  name: "SubmitOrder",
  components: {FYNavBar},
  data(){
    return{
      goodsList: [],
      address: {
        name: "张三",
        tel: "",
        province: "",
        city: "",
        county: "",
        addressDetail: ""
      }
    }
  },
  methods:{
    onSubmit(){
      alert("Hello world!")
    }
  },
  mounted() {
    this.goodsList = this.$store.state.cart;

      let storeAddress = null;

      storeAddress = this.$store.state.selectedAddress;

      if(storeAddress !== null){
          this.address = storeAddress;
      }else{
          this.$http.get(`address/default`).then(resp => {
              this.address = Address.convertToFront(resp.data)
          })
      }
  },
  created() {
    this.goodsList = this.$store.state.cart;
  },
  computed:{
    totalPrice(){
      let total = 0;
      for(let goods of this.goodsList){
        total += parseFloat(goods.price) * goods.count
      }
      return total * 100
    },
  }
}
</script>

<style scoped>
.user-info{
  text-align: left;
  padding-left: 20px;
}
.address-info{
  text-align: left;
  padding-left: 20px;
}
</style>
